<template>
  <div class="app">
    <div class="content">
      <router-view></router-view>
      <ul>
        <li><router-link to="/appson/index">首页</router-link></li>
        <li><router-link to="/appson/分类">分类</router-link></li>
        <li><router-link to="/appson/惊喜">惊喜</router-link></li>
        <li><router-link to="/appson/购物车">购物车</router-link></li>
        <li><router-link to="/appson/我的">我的</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {},

  computed: {},

  components: {},
};
</script>

<style scoped lang=less>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.app {
  width: 300px;
  height: 550px;
  background-color: #707477;
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction:column;
  justify-content: space-between;
}
ul {
  display: inline-flex;
  list-style: none;
  font-size: 12px;
  background-color: #707477;
  width: 100%;
  justify-content: space-evenly;
  bottom: 1px;
  background-color: #778899;
  a {
    text-decoration: none;
    color: aliceblue;
  }
}
.router-link-active {
  color: #ffad34;
}
</style>